<template>
  <div class="detail-title">详情</div>
  <div class="detail-container">
    <div class="box h100">
      <n-flex
        vertical
        justify="space-between"
        class="h100"
      >
        <n-flex vertical>
          <div class="detail-text__minor">单卡总额</div>
          <div class="detail-text__primary">7,312.61</div>
        </n-flex>
        <div>
          <span
            class="detail-text__minor"
            style="font-size: 12px"
            >本周剩余额度</span
          >
          <n-progress
            type="line"
            :show-indicator="false"
            status="success"
            :percentage="20"
          />
        </div>
      </n-flex>
    </div>
    <n-flex
      class="box"
      vertical
    >
      <n-flex
        align="center"
        justify="space-between"
      >
        <h6>近期消费</h6>
        <n-select
          v-model:value="value"
          :options="options"
          style="width: 100px"
          size="small"
        />
      </n-flex>
      <div
        ref="recentRef"
        class="flex1"
      ></div>
    </n-flex>

    <n-flex
      class="box"
      align="center"
    >
      <n-icon
        size="40"
        color="#cf7373"
        class="mr-12"
        :component="TrendingDown"
      />
      <n-flex
        vertical
        justify="space-around"
        class="h100"
      >
        <span class="detail-text__minor">总消费</span>
        <h5>321.32</h5>
        <n-flex class="detail-text__minor">
          <span>昨: 0元</span>
          <span>今: 0元</span>
        </n-flex>
      </n-flex>
    </n-flex>
    <n-flex
      class="box"
      align="center"
    >
      <n-icon
        size="40"
        color="#7db562"
        class="mr-12"
        :component="TrendingUp"
      />
      <n-flex
        vertical
        justify="space-around"
        class="h100"
      >
        <span class="detail-text__minor">总收入</span>
        <h5>321.32</h5>
        <n-flex class="detail-text__minor">
          <span>昨: 21.00元</span>
          <span>今: 32.00元</span>
        </n-flex>
      </n-flex>
    </n-flex>
  </div>
</template>

<script lang="ts" setup>
  import { TrendingDown, TrendingUp } from '@vicons/ionicons5'

  const { $eChart }: any = useNuxtApp()
  const recentRef = ref(null)

  const value = ref('本周')
  const options = [
    {
      label: '本周',
      value: '本周'
    },
    {
      label: '上周',
      value: '上周'
    }
  ]
  const createRecentChart = () => {
    const recentChart = $eChart.init(recentRef.value)
    recentChart.setOption({
      xAxis: {
        axisLine: {
          show: false // 关闭轴线
        },
        axisTick: {
          show: false // 关闭刻度线
        },
        axisLabel: {
          textStyle: {
            color: '#989898' // y 轴刻度标签颜色
          },
          show: true // 关闭刻度标签
        },
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          textStyle: {
            color: '#989898' // y 轴刻度标签颜色
          },
          show: true // 关闭刻度标签
        }
      },
      grid: {
        top: 24,
        bottom: 24,
        left: 32,
        right: 24
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line',
          smooth: true,
          showSymbol: false,
          lineStyle: {
            normal: {
              color: new $eChart.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#d913d8' // 渐变起始色
                },
                {
                  offset: 1,
                  color: '#2e29cb' // 渐变结束色
                }
              ]),
              width: 4, // 线条宽度
              shadowColor: 'rgba(0,0,0,0.4)',
              shadowBlur: 10,
              shadowOffsetY: 10,
              lineCap: 'round'
            }
          }
        }
      ]
    })
    window.addEventListener('resize', () => recentChart.resize())
  }

  onMounted(() => {
    createRecentChart()
  })
</script>

<style scoped lang="scss">
  .detail {
    &-title {
      font-size: $fs-xl;
      font-weight: bold;
      margin-bottom: $space-sm;
    }
    &-text__primary {
      font-size: 22px;
      color: #000;
      font-weight: bold;
    }
    &-text__minor {
      font-size: 14px;
      color: #989898;
    }
    &-container {
      display: grid;
      height: 360px;
      width: 100%;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: repeat(5, 1fr);
      gap: 12px;
      margin-bottom: $space-default;
      .box {
        &:nth-child(1) {
          grid-column: span 2;
          grid-row: span 3;
        }
        &:nth-child(2) {
          grid-column: span 4;
          grid-row: span 5;
        }
        &:nth-child(3),
        &:nth-child(4) {
          min-width: 280px;
          grid-column: span 1;
          grid-row: span 2;
        }
      }
    }
  }
</style>
